{include file="include:headerFile" /}
{include file="include:header" /}
{include file="include:banner" /}
<main>
    {include file="include:crumbs" /}

    {volist name="pagePartList" id="pagePart"}

    {if $pagePart.name == 'contact' }

    <!-- 联系我们按钮 -->
    {include file="include:contactusbottom" /}

    {elseif $pagePart.name == 'Related products' /}
    {notempty name='productList'}
    <section class="soultionxq-s5">
        <div class="index-pro-mid">
            <div class="index-pro-kuang w1600">
                <div class="index-pro-k-top">
                    <div class="index-pro-top-left">
                        <p class="index-pro-top-title">
                            RELATED PRODUCTS
                        </p>
                    </div>
                    <div class="index-banner-bottom">
                        <a class="quan-annu" href="/products" title="">
                            <span class="tubiao">
                                <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 54 56" width="100%" height="100%" fill="none">
                        <path fill="currentColor" fill-rule="evenodd" d="M50.624 44.169A28.028 28.028 0 0 1 28 55.583c-15.464 0-28-12.443-28-27.792C0 12.443 12.536 0 28 0c11.94 0 22.136 7.419 26.161 17.866h-.858C49.318 7.866 39.49.794 28 .794 12.978.794.8 12.881.8 27.791S12.978 54.79 28 54.79a27.226 27.226 0 0 0 21.626-10.62h.998Z"></path>
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none"
                         version="1.1" width="14" height="14" viewbox="0 0 14 14">
                        <g>
                            <g></g>
                            <g></g>
                            <g>
                                <path d="M10.78242,3.783268L10.78284,3.782843Q10.8391,3.726582,10.86955,3.653073Q10.9,3.5795649,10.9,3.5Q10.9,3.420435,10.86955,3.346926Q10.8391,3.273418,10.78284,3.217157Q10.78101,3.215327,10.779160000000001,3.21352Q10.72314,3.158931,10.650680000000001,3.129465Q10.57822,3.1,10.5,3.1L10.49557,3.100025Q10.417159999999999,3.100893,10.34488,3.131301Q10.2726,3.1617100000000002,10.21716,3.217157L3.217157,10.21716Q3.160896,10.27342,3.130448,10.34693Q3.1,10.42043,3.1,10.5Q3.1,10.50961,3.100462,10.519210000000001Q3.107885,10.67357,3.217157,10.78284Q3.273418,10.8391,3.346927,10.86955Q3.420435,10.9,3.5,10.9Q3.5795649,10.9,3.653073,10.86955Q3.726582,10.8391,3.782843,10.78284L3.783268,10.78242L10.78242,3.783268Z" fill-rule="evenodd" fill="currentColor" fill-opacity="1"></path>
                            </g>
                            <g>
                                <path d="M10.100059070587157,3.900000238418579L10.100059070587157,9.19000023841858Q10.100059070587157,9.22940023841858,10.107749070587158,9.268040238418578Q10.115429070587158,9.30668023841858,10.13050907058716,9.34307023841858Q10.145579070587157,9.37947023841858,10.167469070587158,9.41223023841858Q10.189359070587159,9.44498023841858,10.21721907058716,9.472840238418579Q10.245069070587158,9.50070023841858,10.277829070587158,9.52259023841858Q10.31058907058716,9.54447023841858,10.346989070587158,9.559550238418579Q10.383379070587157,9.574630238418578,10.422019070587158,9.582310238418579Q10.460659070587159,9.590000238418579,10.50005907058716,9.590000238418579Q10.539459070587158,9.590000238418579,10.578099070587157,9.582310238418579Q10.616739070587158,9.574630238418578,10.653129070587159,9.559550238418579Q10.68952907058716,9.54447023841858,10.72228907058716,9.52259023841858Q10.75503907058716,9.50070023841858,10.782899070587158,9.472840238418579Q10.810759070587158,9.44498023841858,10.83264907058716,9.41223023841858Q10.854529070587159,9.37947023841858,10.869609070587158,9.34307023841858Q10.884689070587157,9.30668023841858,10.892369070587158,9.268040238418578Q10.900059070587158,9.22940023841858,10.900059070587158,9.19000023841858L10.900059070587158,3.500000238418579Q10.900059070587158,3.460603638418579,10.892369070587158,3.4219641384185793Q10.884689070587157,3.383324238418579,10.869609070587158,3.346927238418579Q10.854529070587159,3.310529238418579,10.83264907058716,3.2777722384185792Q10.810759070587158,3.245015238418579,10.782899070587158,3.217157238418579Q10.75503907058716,3.1893002384185793,10.72228907058716,3.167412238418579Q10.68952907058716,3.1455252384185792,10.653129070587159,3.130448238418579Q10.616739070587158,3.115372238418579,10.578099070587157,3.1076862384185793Q10.539459070587158,3.100000238418579,10.50005907058716,3.100000238418579L4.810059070587158,3.100000238418579Q4.770662470587158,3.100000238418579,4.732022970587158,3.1076862384185793Q4.693383070587158,3.115372238418579,4.656986070587158,3.130448238418579Q4.620588070587158,3.1455252384185792,4.587831070587158,3.167412238418579Q4.555074070587159,3.1893002384185793,4.5272160705871585,3.217157238418579Q4.4993590705871584,3.245015238418579,4.477471070587158,3.2777722384185792Q4.455584070587158,3.310529238418579,4.4405070705871585,3.346927238418579Q4.425431070587158,3.383324238418579,4.417745070587158,3.4219641384185793Q4.410059070587158,3.460603638418579,4.410059070587158,3.500000238418579Q4.410059070587158,3.539396838418579,4.417745070587158,3.578036338418579Q4.425431070587158,3.616676238418579,4.4405070705871585,3.653073238418579Q4.455584070587158,3.6894712384185793,4.477471070587158,3.722228238418579Q4.4993590705871584,3.754985238418579,4.5272160705871585,3.7828432384185793Q4.555074070587159,3.810700238418579,4.587831070587158,3.832588238418579Q4.620588070587158,3.854475238418579,4.656986070587158,3.869552238418579Q4.693383070587158,3.8846282384185793,4.732022970587158,3.892314238418579Q4.770662470587158,3.900000238418579,4.810059070587158,3.900000238418579L10.100059070587157,3.900000238418579Z" fill-rule="evenodd" fill="currentColor" fill-opacity="1"></path>
                            </g>
                        </g>
                    </svg></span>
                            <span class="quan-annu-nr">
								Request Lighting Plan
                            </span>
                        </a>
                    </div>
                </div>
                <div class="index-pro-table">
                    <div class="index_pro_tableswiper">
                        <div class="index-pro-tabkuang">
                            <div class="swiper mySwiper tableswiper">
                                <div class="swiper-wrapper">
                                    {volist name="productList" id="vo"}
                                        <div class="swiper-slide">
                                        <a class="index-pro-table-k" href="/{$vo.rewrite_url}.html"><p class="index-pro-img">
                                            <img src="{$vo.photo}" alt=""/>
                                        </p>
                                            <p class="index-pro-xl">
                                                {$vo.series}
                                            </p>
                                            <p class="index-pro-title">
                                                {$vo.name}
                                            </p>
                                            <p class="index-pro-xh">
                                                {$vo.model}
                                            </p>
                                            {$vo.desc | raw}
                                            {notempty name="$vo.characteristic_text"}
                                            <div class="index-pro-jnname">
                                                {volist name="$vo.characteristic_text" id="v"}
                                                    <p>
                                                        {$v}
                                                    </p>
                                                {/volist}
                                            </div>
                                            {/notempty}
                                        </a>
                                    </div>
                                    {/volist}

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    {/notempty}

    {elseif $pagePart.name == 'solutions' /}
    <section class="qsc-s5">
        <div class="qsc-s5-mid">
            <!--<div class="qsc-s5-kuang w1600">-->
            <div class="qsc-s5-kuang w1600">
                {$pagePart.content|raw}
                <div class="swiper mySwiper advswiper">
                    <div class="swiper-wrapper">
                        {volist name="solutionsList" id="vo"}
                        <div class="swiper-slide">
                            <a class="advimg-img" href="{if !empty($vo.link)}{$vo.link}{else/}/{$vo.rewrite_url|default=''}.html{/if}" title="{$vo.name}">
                                <img src="{$vo.icon}" alt="{$vo.name}"/>
                                <span class="advimg-name">
								{$vo.name}
                                </span>
                            </a>
                        </div>
                        {/volist}
                    </div>
                </div>
            </div>
        </div>
    </section>

    {elseif $pagePart.name == 'patented_technologies' /}
    {notempty name='certificationsList'}
    <section>
        <div class="about-s4-mid white">
            <div class="about-s4-kuang">
                <div class="index-solution-k-top w1600">
                    {$pagePart.content|raw}
                    <div class="swiper mySwiper aboutzhengshuswiper">
                        <div class="swiper-wrapper baguetteBoxTwo ">
                            {volist name="certificationsList" id="vo"}
                            <div class="swiper-slide">
                                <a class="" href="{$vo.photo}" title="{$vo.name}">
                                    <img src="{$vo.photo}" alt="{$vo.name}"/>
                                    <img src="/static/images/zhengshubiankuang.png" alt=""/>
                                </a>
                            </div>
                            {/volist}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    {/notempty}
    {elseif $pagePart.name == 'form' /}
    {include file="include:form" /}
    {else /}
    {$pagePart.content|raw}
    {/if}
    {/volist}

</main>
{include file="include:footer" /}
{include file="include:footerFile" /}
<!--start Solar lighting-->
<script>
    $(".about-s2-bottom .support-kuang").hide();
    $(".about-s2-bottom .support-kuang").eq(0).fadeIn(0);

    $(".about-s2-top ul li").hover(function () {
        $(this).addClass("active").siblings().removeClass("active");
        var index = $(this).index();

        $(".about-s2-bottom .support-kuang").stop(true, true).fadeOut(0); // 先淡出所有
        $(".about-s2-bottom .support-kuang").eq(index).stop(true, true).fadeIn(0); // 再淡入目标
    });
    $(".solutionsxq-key-top").hover(function () {
        $(this).parent().addClass("active").siblings().removeClass("active");
    });

    var hzhbswiper = new Swiper(".hzhbswiper", {
        slidesPerView: 3,
        spaceBetween: 10,
        autoplay: true,
        breakpoints: {
            451: {
                slidesPerView: 5,
                spaceBetween: 10,
            },
            769: {
                slidesPerView: 6,
                spaceBetween: 40,
            },
            992: {
                slidesPerView: 8,
                spaceBetween: 40,

            },
            1440: {
                slidesPerView: 8,
                spaceBetween: 60,
            },
        },
    });


    var tableswiper = new Swiper(".tableswiper", {
        slidesPerView: 1,
        spaceBetween: 28,
        observer: true,
        observeParents: true,
        breakpoints: {
            1400: {
                slidesPerView: 2,
                spaceBetween: 28,
            },
            992: {
                slidesPerView: 1.6,
                spaceBetween: 28,
            },
            769: {
                slidesPerView: 1.3,
                spaceBetween: 28,
            }
        }
    });

    var advswiper = new Swiper(".advswiper", {
        slidesPerView: 1.2,
        spaceBetween: 18,
        observer: true,
        observeParents: true,
        breakpoints: {
            992: {
                slidesPerView: 3.2,
                spaceBetween: 18,
            },
            451: {
                slidesPerView: 2.2,
                spaceBetween: 18,
            }
        },
    })


    var qsc_iqcswiper = new Swiper(".qsc_iqcswiper", {
        slidesPerView: 1.4,
        spaceBetween: 16,
        pagination: {
            el: ".qsc-s2-kuang .swiper-pagination",
            type: "progressbar",
        },
        breakpoints: {
            1280: {
                slidesPerView: 3.8,
                spaceBetween: 16,
            },
            992: {
                slidesPerView: 3,
                spaceBetween: 16,
            },
            581: {
                slidesPerView: 2,
                spaceBetween: 16,
            }
        },

    });

</script>
<!--end Solar lighting-->
<!--start capabilities-->
<script>
    $(".capa-s2-right p").eq(0).show()
    $(".capa-s2-letf ul li").hover(function () {
        $(this).addClass("active").siblings().removeClass("active");
        let index = $(this).index();
        console.log(index);
        $(".capa-s2-right p").hide()
        $(".capa-s2-right p").eq(index).show()
    })
    var aboutzhengshuswiper = new Swiper(".aboutzhengshuswiper", {
        effect: "coverflow",
        grabCursor: true,
        centeredSlides: true,
        loop: true,
        autoplay: {
							    delay: 3000,//3秒切换一次
							  },
        slidesPerView: 2,
        coverflowEffect: {
            rotate: 0,
            stretch: 24,
            depth: 120,
            modifier: 2,
            slideShadows: false,
        },
        breakpoints: {
            1024: {
                slidesPerView: 4,
            },
            768: {
                slidesPerView: 3,
            },
            451: {
                slidesPerView: 3,
            },
        },
    });
</script>
<script src="/static/js/baguetteBox.js"></script>
<!--end capabilities-->
<!--start Quality Control System-->
<script>
    $(".about-s2-bottom .support-kuang").hide();
    $(".about-s2-bottom .support-kuang").eq(0).fadeIn(300);

    $(".about-s2-top ul li").click(function () {
        $(this).addClass("active").siblings().removeClass("active");
        var index = $(this).index();

        $(".about-s2-bottom .support-kuang").stop(true, true).fadeOut(300); // 先淡出所有
        $(".about-s2-bottom .support-kuang").eq(index).stop(true, true).fadeIn(300); // 再淡入目标
    });

    $(".qsc-s3-k-nr").hover(function () {
        $(this).addClass("active").siblings().removeClass("active");
    })
    var advswiper = new Swiper(".advswiper", {
        slidesPerView: 1.2,
        spaceBetween: 18,
        breakpoints: {
            992: {
                slidesPerView: 3.2,
                spaceBetween: 18,
            },
            451: {
                slidesPerView: 2.2,
                spaceBetween: 18,
            }
        },
    })

    var qsc_iqcswiper = new Swiper(".qsc_iqcswiper", {
        slidesPerView: 1.4,
        spaceBetween: 16,
        pagination: {
            el: ".qsc-s2-kuang .swiper-pagination",
            type: "progressbar",
        },
        breakpoints: {
            1280: {
                slidesPerView: 3.8,
                spaceBetween: 16,
            },
            992: {
                slidesPerView: 3,
                spaceBetween: 16,
            },
            581: {
                slidesPerView: 2,
                spaceBetween: 16,
            }
        },

    });
</script>
<!--end Quality Control System-->
<!--start Quality Control System-->
<script>
    var hzhbswiper = new Swiper(".hzhbswiper", {
        slidesPerView: 3,
        spaceBetween: 10,
        autoplay: true,
        breakpoints: {
            451: {
                slidesPerView: 5,
                spaceBetween: 10,
            },
            769: {
                slidesPerView: 6,
                spaceBetween: 40,
            },
            992: {
                slidesPerView: 8,
                spaceBetween: 40,

            },
            1440: {
                slidesPerView: 8,
                spaceBetween: 60,
            },
        },
    });

    var plswiper = new Swiper(".plswiper", {
        spaceBetween: 10,
        slidesPerView: 1,
        // loop: true,
        initialSlide: 1
    });

    var qsc_iqcswiper = new Swiper(".qsc_iqcswiper", {
        slidesPerView: 1.4,
        spaceBetween: 16,
        pagination: {
            el: ".qsc-s2-kuang .swiper-pagination",
            type: "progressbar",
        },
        breakpoints: {
            1280: {
                slidesPerView: 3.8,
                spaceBetween: 16,
            },
            992: {
                slidesPerView: 3,
                spaceBetween: 16,
            },
            581: {
                slidesPerView: 2,
                spaceBetween: 16,
            }
        },

    });

    // var aboutzhengshuswiper = new Swiper(".aboutzhengshuswiper", {
    //     effect: "coverflow",
    //     grabCursor: true,
    //     centeredSlides: true,
    //     loop: true,
    //     slidesPerView: 2,
    //      autoplay:true,
    //     coverflowEffect: {
    //         rotate: 0,
    //         stretch: 24,
    //         depth: 120,
    //         modifier: 2,
    //         slideShadows: false,
    //     },
    //     breakpoints: {
    //         1024: {
    //             slidesPerView: 4,
    //         },
    //         768: {
    //             slidesPerView: 3,
    //         },
    //         451: {
    //             slidesPerView: 3,
    //         },
    //     },
    // });


</script>
<!--end Quality Control System-->
<!--start Support-->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const newmaodian = document.getElementById('newxcontact');
        const toc = document.getElementById('toc');
        const offset = window.innerHeight * 0.5;
        let lastActiveId = null;

        // 一、自动生成目录
        const headings = newmaodian.querySelectorAll('h2, h3');
        headings.forEach(h => {
            let rawText = h.textContent.trim();
            let id = rawText.replace(/\s+/g, '').replace(/[^a-zA-Z0-9]/g, '').toLowerCase();

            // 保证唯一性
            let count = 1;
            let tempId = id;
            while (document.getElementById(tempId)) {
                tempId = id + '-' + count++;
            }
            id = tempId;
            h.id = id;

            // 创建目录链接
            const link = document.createElement('a');
            link.href = `#${id}`;
            link.textContent = rawText;
            toc.appendChild(link);
        });

        const navLinks = toc.querySelectorAll("a");
        const sections = Array.from(headings); // 所有 h2、h3 已赋 ID，可用于滚动检测

        // 二、点击平滑滚动
        navLinks.forEach(link => {
            link.addEventListener("click", function (e) {
                const href = this.getAttribute("href");
                if (href && href.startsWith("#")) {
                    e.preventDefault();
                    const targetEl = document.querySelector(href);
                    if (targetEl) {
                        targetEl.scrollIntoView({
                            behavior: "smooth",
                            block: "start"
                        });
                    }
                }
            });
        });

        // 三、滚动高亮导航项
        function checkScroll() {
            let activeSectionId = null;

            sections.forEach(section => {
                const rect = section.getBoundingClientRect();
                if (rect.top <= offset && rect.bottom >= 0) {
                    activeSectionId = section.id;
                }
            });

            if (activeSectionId === lastActiveId) return;

            lastActiveId = activeSectionId;

            navLinks.forEach(link => {
                const href = link.getAttribute("href");
                if (!href || !href.startsWith("#")) return;

                const targetId = href.substring(1);
                const isActive = (targetId === activeSectionId);

                const parentLi = link.closest("li");
                if (parentLi) {
                    parentLi.classList.toggle("active", isActive);
                    if (isActive) {
                        parentLi.scrollIntoView({
                            behavior: "smooth",
                            inline: "center",
                            block: "nearest"
                        });
                    }
                } else {
                    link.classList.toggle("active", isActive);
                    if (isActive) {
                        link.scrollIntoView({
                            behavior: "smooth",
                            inline: "center",
                            block: "nearest"
                        });
                    }
                }
            });
        }

        // 四、初始化高亮
        function initHighlight() {
            let activeSectionId = null;
            sections.forEach(section => {
                const rect = section.getBoundingClientRect();
                if (rect.top <= offset && rect.bottom >= 0) {
                    activeSectionId = section.id;
                }
            });

            lastActiveId = activeSectionId;

            navLinks.forEach(link => {
                const href = link.getAttribute("href");
                if (!href || !href.startsWith("#")) return;

                const targetId = href.substring(1);
                const isActive = (targetId === activeSectionId);

                const parentLi = link.closest("li");
                if (parentLi) {
                    parentLi.classList.toggle("active", isActive);
                } else {
                    link.classList.toggle("active", isActive);
                }
            });
        }

        // 绑定滚动监听（防抖）
        let isScrolling;
        window.addEventListener("scroll", () => {
            clearTimeout(isScrolling);
            isScrolling = setTimeout(checkScroll, 100);
        });

        // 初始化
        initHighlight();
    });

</script>
<!--end Support-->
</body>
</html>